<template lang="pug">
    nav.navbar.navbar-marketing.navbar-expand-lg(
        :class='topNavClassesComputed'
        :data-aos="detectScreenSize('fade-down')"
        :data-aos-duration="350"
    )
        .container-md
            router-link.navbar-brand(:class='brandClasses' to='/')
                img(src="/assets/img/brand-logos/sd_logo.png")
            button.navbar-toggler(:class='buttonClasses' type='button' data-toggle='collapse' data-target='#navbarSupportedContent' aria-controls='navbarSupportedContent' aria-expanded='false' aria-label='Toggle navigation')
                menu-icon
            .collapse.navbar-collapse#navbarSupportedContent
                ul.navbar-nav.ml-auto.mr-lg-4
                    //li.nav-item
                        //router-link.nav-link(to='/') Home
                    template(v-for="entry in contents")
                        menu-brief(
                            v-if="entry.categoryList.length === 1"
                            :title='entry.title_name'
                            :itemList='entry.categoryList[0].itemList'
                        )
                        menu-default(
                            v-if="entry.categoryList.length > 1"
                            :title='entry.title_name'
                            :categoryList="entry.categoryList"
                        )

                search-bar.px-2.px-lg-0
                //search-bar.animated--fade-in.mb-3.mb-lg-0

                //a.btn-teal.btn.rounded-pill.px-4.ml-lg-4(href='https://shop.startbootstrap.com/sb-ui-kit-pro-vue')
                //    | Buy Now
                //    font-awesome-icon.ml-1(:icon='["fas", "arrow-right"]')
</template>

<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator';
import SBProMenuDocumentation from '@structural/menu-documentation.vue';
import SBProMenuLandings from '@structural/menu-landings.vue';
import SBProMenuPages from '@structural/menu-pages.vue';
import SearchBar from '@structural/search-bar.vue';
import MenuBrief from '@structural/menu-brief.vue';
import MenuDefault from '@structural/menu-default.vue';

@Component({
    components: {
        MenuDefault,
        MenuBrief,
        'sbpro-menu-documentation': SBProMenuDocumentation,
        'sbpro-menu-landings': SBProMenuLandings,
        'sbpro-menu-pages': SBProMenuPages,
        'search-bar': SearchBar,
    },
})
export default class TopNav extends Vue {
    @Prop({ default: 'fixed-top' }) private topNavClasses!: string;
    @Prop({ default: 'text-primary' }) private brandClasses!: string;
    @Prop({ default: 'btn-primary' }) private buttonClasses!: string;

    isTransparentFixed = false;
    scrolledClassAdded = false;

    //绑定vuex navContent, 实现响应式
    get contents() {
        return this.$store.getters.navContent;
    }

    get topNavClassesComputed() {
        if (this.scrolledClassAdded) {
            return `${this.topNavClasses} navbar-scrolled`;
        }
        return this.topNavClasses;
    }

    //若屏幕过小则不显示动画
    detectScreenSize(animation: string): string {
        if (document.documentElement.clientWidth > 500) {
            return animation;
        }
        return '';
    }

    mounted() {
        if (
            this.topNavClasses.match('bg-transparent') &&
            this.topNavClasses.match('fixed-top')
        ) {
            this.isTransparentFixed = true;
        }

        window.document.body.onscroll = () => {
            if (!this.isTransparentFixed) {
                return;
            }
            if (window.scrollY > 0 && !this.scrolledClassAdded) {
                this.scrolledClassAdded = true;
                return;
            }
            if (window.scrollY === 0) {
                this.scrolledClassAdded = false;
            }
        };
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.container {
    padding-left: 0;
    padding-right: 0.4rem;
}
.brand-img {
    background-image: url('/public/assets/img/brand-logos/se_logo.png');
}
.navbar-marketing .navbar-nav {
    padding: 1.3rem 0;
}
</style>
